<!--
 * @Author: DUST
 * @Date: 2023-05-16 14:18:47
 * @LastEditors: DUST
 * @LastEditTime: 2023-12-14 10:58:37
 * @FilePath: \business-card-system\admin\src\components\antTable.vue
 * @Description: 
 * undefined
-->
<template>
  <a-table
    @change="handleTableChange"
    :columns="props.columns"
    :loading="loading"
    :rowClassName="rowclass"
    :data-source="props.data"
    :pagination="pagination"
    :rowKey="(record: any) => record[props.tableConfig.rowsKey]"
    :row-selection="
      props.tableConfig.showSelect ? (props.rowskeys ? rowSelection : null) : null
    "
    :scroll="{
        y: tableConfig.y ? tableConfig.y : 600
     }"
  >
  <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span style="color: #1890ff">Name</span>
      </template>
    </template>
    <template
      #customFilterDropdown="{ setSelectedKeys, confirm, clearFilters, column }"
    >
      <div
        class="column"
        style="padding: 8px;"
        v-if="column.filterIconIndex == 'date'"
      >
        <a-range-picker
          v-model:value="inputValue[column.dataIndex!]"
          @change="(e: any, str: any) => changeKeys({e, str, setSelectedKeys, column})"
          @pressEnter="() => confirm()"
        />
        <div class="around mt10">
          <a-button
            type="primary"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => confirm()"
          >
            <template #icon><SearchOutlined /></template>
            搜索
          </a-button>
          <a-button
            size="small"
            style="width: 90px"
            @click="handleReset(clearFilters, column, inputValue, confirm)"
          >
            重置
          </a-button>
        </div>
      </div>
      <div style="padding: 8px" v-else>
        <a-input
          :placeholder="`请输入要查询的${column.title}`"
          v-model:value="inputValue[column.dataIndex!]"
          style="width: 188px; margin-bottom: 8px; display: block"
          @change="(e: any) => changeKeys({e, setSelectedKeys, column})"
          @pressEnter="() => confirm()"
        />
        <a-button
          type="primary"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => confirm()"
        >
          <template #icon><SearchOutlined /></template>
          搜索
        </a-button>
        <a-button
          size="small"
          style="width: 90px"
          @click="handleReset(clearFilters, column, inputValue, confirm)"
        >
          重置
        </a-button>
      </div>
    </template>
    <template #customFilterIcon="{filtered, column}">
      <DownOutlined
        v-if="column.filterIconIndex == 'down'"
        class="center"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
      <search-outlined
        v-else
        class="center"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
    </template>
    <template #bodyCell="{ record, column, text }">
      <template
        v-if="
          Object.prototype.toString.call(record) == '[object Object]' &&
            Object.keys(record)?.length
        "
      >
        <template v-if="column.action === 'operation'">
          <div class="flex">
            <slot
              name="operation"
              :record="record"
              :text="text"
              :column="column"
            ></slot>
          </div>
        </template>
        <template v-else-if="column.action == 'changeRowText'">
          <div :title="text" class="changeRowText">{{ text }}</div>
        </template>
        <template v-else-if="column.action == 'columnCell'">
          <slot
            name="columnCell"
            :record="record"
            :text="text"
            :column="column"
          ></slot>
        </template>
        <template v-else-if="column.action === 'avatar'">
          <img
            v-if="text"
            :src="projectConfig.baseurl + text"
            class="avatarimg"
            alt="avatar"
            v-default-img="errorFace"
          />
          <div v-else class="avatarimg"></div>
        </template>
        <template v-else-if="column.action === 'baseAvatar'">
          <img
            v-if="text"
            :src="text"
            class="avatarimg"
            alt="avatar"
            v-default-img="errorFace"
          />
          <div v-else class="avatarimg"></div>
        </template>
        <template v-else-if="column.action === 'previewAvatar'">
          <a-image
            v-if="text"
            class="avatarimg"
            :src="projectConfig.baseurl + text"
            :fallback="errorFace"
          />
          <div v-else class="avatarimg"></div>
        </template>
        <template v-else-if="column.action === 'previewCompleteAvatar'">
          <a-image
            v-if="text"
            class="avatarimg"
            :src="text"
            :fallback="errorFace"
          />
          <div v-else class="avatarimg"></div>
        </template>
      </template>
      <div v-else class="noDataLine"></div>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { tableColumn } from "../interface";
import { computed, reactive, unref } from 'vue';
import projectConfig from "@/config";
import errorFace from "@/assets/errorFace.jpg"
import useTable from "@/utils/userTable";
import { SearchOutlined, DownOutlined } from "@ant-design/icons-vue";

const emit = defineEmits([
  "update:rowskeys",
  "update:selectedRows",
  "update:pagination",
  "update:sortAndFilter"
]);

const props = defineProps({
  columns: {
    type: Array<tableColumn>,
    defalut: () => []
  },
  data: {
    type: Array,
    default: () => []
  },
  rowskeys: {
    type: Array,
    default: () => []
  },
  showSelect: {
    type: Boolean,
    default: () => false
  },
  loading: {
    type: Boolean,
    default: () => false
  },
  pagination: {
    type: [Object, Boolean],
    default: () => ({
      current: 1, //初始页
      pageSize: 10, //分页大小
      total: 0 //数据总数
    })
  },
  tableConfig: {
    type: Object,
    default: () => ({
      rowsKey: "index",
      // y:
    })
  }
});

export interface tableConfig {
  width?: number;
  heigth?: number;
  rowsKey: string;
  isSelect?: boolean;
  disabledKey?: string;
  disabledFunc?: (record: any) => boolean;
}

const inputValue = reactive<any>({
  name: undefined,
  number: undefined,
  ip: undefined,
  createDate: []
});

const {
  rowclass,
  onSelectChange,
  handleTableChange,
  // edit,
  // del,
  // look,
  // changeFace,
  // changeCardFace,
  changeKeys,
  handleReset
} = useTable(emit,props);

const rowSelection = computed(() => {
  return {
    selectedRowKeys: unref(props.rowskeys),
    onChange: onSelectChange,
    preserveSelectedRowKeys:true,
    // selections: [
    //   Table.SELECTION_ALL,
    //   Table.SELECTION_INVERT,
    //   Table.SELECTION_NONE,
    // ],
    getCheckboxProps: (record: any) => {
      // console.log(props.tableConfig.disabledKey, record[props.tableConfig.disabledKey]);
      if(props.tableConfig.disabledFunc) {
        return {
          disabled: props.tableConfig.disabledFunc(record)
        }
      }
      //  else if(isCheckAll.value) {
      //   return  {
      //     disabled: true
      //   }
      // }
      else {
        return  {
          disabled: props.tableConfig.disabledKey ? !record[props.tableConfig.disabledKey] : false
          // disabled: props.tableConfig.disabledKey ? record[props.tableConfig.disabledKey] : false
        }
      }
    }
  }
})
</script>
